<script lang="ts" setup>
import { ElButton, ElTableColumn, ElTable } from "element-plus"
import Header from "@/views/content/util/header.vue"
import { onMounted, ref, computed, defineEmits } from "vue"
import { getStaffGroupListApi } from '@/apis/staffApi'
import { res } from '@/pojo/dto/res'
//组件
import Limit from "@/views/content/util/limit.vue"
import GroupDetails from "@/views/content/components/staff/groupDetails.vue"
import IButton from "@/views/content/util/button/iButton.vue"
import OButton from "@/views/content/util/button/oButton.vue"


const loadingItemList = ref(false)
const getLimitItemList = (displayedItemList: Array<Object>) => {
    // console.log("接收：")
    // console.log(displayedItemList)
    limitItemList.value = displayedItemList
}

const itemList = ref([])
const limitItemList = ref([])





const getItemList = async () => {
    loadingItemList.value = true
    const res: res = await getStaffGroupListApi()
    itemList.value = res.data
    itemList.value = itemList.value.map(row => {
        return {
            ...row,
            status: row.status === 1 ? true : false
        };
    })
    if (res.code == 0) {
        loadingItemList.value = false
    }
}
const showEdit = ref(false)
const editGroupId = ref()

onMounted(() => {
    getItemList()
})
</script>

<template>
    <div style="width: 97%;">
        <Header title="角色管理"></Header>
        <div>
            <div>
                <IButton @click="editGroupId = undefined; showEdit = true;" title="添加角色" />
                <IButton title="导出角色" type="out" />
            </div>
            <div v-show="!loadingItemList" style="margin-top: 20px">
                <el-table :data="limitItemList" :row-key="(row) => row.id"
                    :header-cell-style="{ background: 'rgb(243, 243, 243)', color: '#606266' }">
                    <el-table-column type="selection"></el-table-column>
                    <el-table-column label="排序" prop="sort" width="100px"></el-table-column>
                    <el-table-column label="ID" prop="groupId"></el-table-column>
                    <el-table-column label="角色名" prop="name"></el-table-column>

                    <el-table-column label="启用状态" prop="status">
                        <template #default="{ row }">
                            <el-switch v-model="row.status" />
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" prop="">
                        <template #default="{ row }">
                            <div class="button-container">
                                <el-tooltip content="编辑" placement="top">
                                    <OButton @click="showEdit = true; editGroupId = row.groupId"></OButton>

                                </el-tooltip>
                                <el-tooltip content="删除" placement="top">
                                    <OButton type="delete"></OButton>
                                </el-tooltip>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <div v-if="loadingItemList" style="display: flex;justify-content: center;">
                <img src="@/assets/images/loading.gif" />
            </div>

            <div v-if="showEdit">
                <GroupDetails :title="editGroupId ? '编辑角色' : '添加角色'" :group-id="editGroupId ? editGroupId : null"
                    @exit-edit-page=" showEdit = false"></GroupDetails>
            </div>

            <div>
                <Limit :itemList="itemList" @updateItemList="getLimitItemList" />
            </div>
        </div>
    </div>
</template>
<style scoped>
::v-deep .el-table th>.cell {
    color: black;
}

.caozuo-button {
    width: 30px;
    height: 15px;
    font-size: 10px;
}
</style>
